<template>
  <div class="w_h_100">

    <div class="head">
      <div class="inlet">业务进件 > <span class="size">业务进件</span></div>
      <div class="d_f j_c_s_b">
        <div class="d_f tabs">
          <div v-for="(item, index) in tabs" :key="index" @click="change(item.id)" class="tab"
            :class="item.id == active ? 'active' : ''">
            {{ item.name }}
          </div>
        </div>
        <div class="Search_input">
          <el-input v-model="keyword" style="width: 320px" placeholder="请输入产品名称进行搜索" :prefix-icon="Search"
            @change="getData" />
        </div>
      </div>
    </div>
    <div class="content m_t_16 " v-loading="loading">
      <div class="d_f f_w_w" v-if="records.length>0&&!loading">
        <div v-for="(item, index) in records" :key="index" class="box p_r">
          <div class="title">{{ item.name }}</div>
          <span class="name">{{ item.productCategory == 1 ? "融资 - 单笔" : item.productCategory == 2 ? '融资 - 批量':item.productCategory==3?'非融 - 单笔':'非融 - 批量'}} </span>
          <el-button type="primary" round class="button" @click="incoming(item)">点击进入</el-button>
        </div>
      </div>
      <div class="center d_f j_c_c a_i_c f_d_c" v-if="records.length==0&&!loading">
          <img src="../../assets/blank.png" class="image" />
          <p class="m_t_20">暂时还没有内容呢...</p>
        </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { projectInput } from '../../api/business'
import { useRouter } from 'vue-router'
import { dataType } from '../../type/business'
export default defineComponent({
  name: '',
  setup() {
    const data: dataType = reactive({
      tabs: [
        {
          name: '全部',
          id: '1,3',
        },
        // {
        //   name: '融资批量业务',
        //   id: '2',
        // },
        {
          name: '融资单笔业务',
          id: '1',
        },
        // {
        //   name: '非融资批量业务',
        //   id: '4',
        // },
        {
          name: '非融资单笔业务',
          id: '3',
        },
      ],
      active: '1,3',
      keyword: '',
      records: [],
      loading:false,
    })
    const router = useRouter()
    onBeforeMount(() => {
      methods.getData()
    })
    const methods = {
      getData() {
        data.loading=true
        projectInput({ productName: data.keyword, productType: data.active }).then((res: any) => {
          data.records = res
          data.loading=false
        }).catch(()=>{
          data.loading=false
        })
      },
      change(id: string) {
        data.active = id
        methods.getData()
      },
      //跳转到业务进件详情，填写信息
      incoming(row: any) {
        router.push({ path: '/business/incoming', query: { id: row.id, cooperativeAgencyId: row.cooperativeAgencyId } })
      }
    }
    return {
      ...toRefs(data),
      Search, ...methods
    }
  }
})
</script>
<style scoped lang='scss'>
.head {
  width: calc(100% - 3.32vw);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  height: 70px;
  padding: 10px 1.66vw;
  margin-top: 10px;

  .tabs {
    width: 50%;
    margin-top: 20px;

    .tab {
      padding: 3px 23px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.6);
      cursor: pointer;
    }

    .active {
      border: 1px solid #1878FF;
      border-radius: 3px;
      color: #1878FF;
    }
  }

}
</style>
<style lang="scss">
.Search_input {
  width: 320px !important;
  height: 32px;
  background: rgba(231, 231, 231, 0.4);
  border-radius: 3px;

  .el-input {
    border: none !important;
    width: 100% !important;
  }

  .el-input__wrapper {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
    background: transparent !important;
    cursor: default;

    .el-input__inner {
      cursor: default !important;
    }
  }
}

.content {
  overflow-y: auto;
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 24px 32px;
  height: calc(100% - 160px);

  .box {
    background-image: url('../../assets/parts.png');
    background-size: 100% 100%;
    width: 19.6%;
    height: 8vw;
    padding: 2.1875vw 2.08vw;

    .title {
      // position: absolute;
      // top: 2.1875vw;
      // left: 2.08vw;
      color: rgba(22, 35, 55, 0.9);
      font-size: 1.77vw;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      width: 100%;
    }

    .name {
      // left: 2.08vw;
      // top: 5.52vw;
      // position: absolute;
      color: rgba(22, 35, 55, 0.4);
      font-size: 14px;
    }

    .button {
      position: absolute;
      right: 2.39vw;
      bottom: 1.5625vw;
    }
  }
}
</style>